<style lang="less">
 @import "../style/variables.less";
  .sidebar{
    width: 85%;
    position:fixed;
    left:-85%;
    top:0;
    z-index: 106;
    height: 100%;
    overflow:auto ;
    transition: all .5s;
    &.sidebar-show{
      left:0
    }
  }
  .user{
    background: @color;
    padding: 15px;
    color:#fff;
    height: 100px;
    overflow: hidden;
    .user-head{
      width: 30px;
      height: 30px;
    }
    .user-name{
      line-height: 30px;
      vertical-align: top;
      margin-left: 5px;
      color:#fff;
    }
    .user-option{
      margin-top: 20px;
      font-size: 14px;
      i{
        margin-right: 26px;
      }

    }
    .my-collect,.offline-download{
      width: 50%;
    }
  }
  .news-category-list{
    font-size: 18px;
    color:#000;
    background: #fff;
    li{
      height: 50px;
      line-height: 50px;
      padding-left: 15px;
      a{
        display: block;
        color:#000;
      }
      &.home{
        color:@color;
        i{
          margin-right: 10px;
        }
        a{
          color:@color;
        }
      }
      &.category-active{
        background: #eee;
      }
    }
    .news-category{
      i{
        float: right;
        font-weight: lighter;
        margin-right: 30px;
        line-height: 40px;
        color:#ccc;
      }
    }
  }

</style>
<template>
  <aside class="sidebar" :class="{'sidebar-show':isShow}" >
    <div class="user">
      <div class="user-header">
        <img src="../assets/img/default-user-head.jpg" class="user-head img-circle">
        <span class="user-name">请登录</span>
      </div>
      <div class="user-option clearfix">
        <div class="my-collect left">
          <i class="fa fa-star"></i>我的收藏
        </div>
        <div class="offline-download right">
          <i class="fa fa-download"></i>离线下载
        </div>
      </div>
    </div>
    <ul class="news-category-list">
      <li class="home" @click="changeRoute(0,'首页')" :class="{'category-active': activeTheme == 0}">
        <router-link to="/home" ><i class="fa fa-home"></i>首页</router-link>

      </li>
      <li class="news-category" @click="changeRoute(category.id,category.name)" v-for="category in themeCategories" :class="{'category-active': activeTheme == category.id}">
        <router-link  :to="'/home/cate/'+category.id">{{category.name}}<i class="fa fa-plus"></i></router-link>

      </li>
    </ul>
  </aside>
</template>
<script type="text/javascript">
import { mapState } from 'vuex'
  export default {
    name:'sidebar',
    data() {
      return {
        activeTheme: 0
      }
    },
    props:['isShow'],
    methods:{
      changeRoute(id,name) {
       this.$parent.isShow = false
       this.activeTheme = id
       this.$store.dispatch('changeScroll')
       this.setDocumentTitle(name)
       this.$parent.categoryName = name
      }
    },
    computed:mapState({
      themeCategories: state => state.themeCategories,
    }),
    created() {
      if(this.$store.state.themeCategories.length == 0){
        this.$store.dispatch('getData',{
          url:'/api/4/themes',
          mutation: 'GET_THEME_CATEGORY'
        });
      }
    },
    mounted() {
    }

  }
</script>
